<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js-18[自定义属性---选项卡]</title>
	<style type="text/css">
		div{
			border: 1px solid red;
			width: 200px;
			height: 200px;
			display: none;
		}
	</style>
	<script type="text/javascript">
		
		/**
            功能需求
            选项卡效果
            点击对应选项，显示相应内容
		***/
        window.onload=function(){
           var inputs=document.querySelectorAll('input');
           var divs=document.querySelectorAll('div');
           var prevlast = inputs[0];  //这个变量是存的上一个点击对像 ，默认第0个

           console.dir(inputs);
           console.dir(divs);

           
            for (var i = 0; i < inputs.length ; i++) {

            	inputs[i].index=i;  //设置一个自定义属性，给一个I值

            	inputs[i].onclick=function(){

            		//把上一次点击对像的背景色去掉
            		prevlast.style.background="";
            		//把上一个对应的DIV隐藏
            		divs[prevlast.index].style.display="none";
            		//填加当前点击按扭的背景色
            		this.style.background="#990000";
            		//让当前点击的按扭,对应的div显示出来
            		divs[this.index].style.display="block";
            		//把上一次点击的对像更新成当成点击的对像
            	    prevlast = this;  

            	}
            }


        }
	</script>
</head>
<body>
	<input type="button" id="" value="选项1" style="background:#990000">
	<input type="button" id="" value="选项2">
	<input type="button" id="" value="选项3">
	<div style="display: block;">内容1</div>
	<div>内容2</div>
	<div>内容3</div>
</body>
</html>